<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 150px;
            height: 150px;
            background-color: #6ff;
            position: absolute;
            left: 150px;
            top: 150px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 面向过程
    // 1. 获取元素
    // 2. 鼠标按下  记录按下的位置
    // 3. 鼠标移动  盒子跟随鼠标移动
    // 4. 鼠标抬起  盒子不在移动  

    // var box = document.getElementsByClassName("box")[0];

    // box.onmousedown = function (e) {
    //     var e = e || window.event;
    //     var posX = e.offsetX;
    //     var posY = e.offsetY;
    //     console.log(posX, posY);

    //     document.onmousemove = function (e) {
    //         var e = e || window.event;
    //         var x = e.pageX - posX;
    //         var y = e.pageY - posY;

    //         box.style.left = x + 'px';
    //         box.style.top = y + 'px';
    //     }

    //     document.onmouseup = function () {
    //         document.onmousemove = null;
    //         document.onmouseup = null;
    //     }

    // }


    //  思想上提升 , 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)

    // 拖拽元素 
    // 1. 获取元素
    // 2. 鼠标按下  记录按下的位置
    // 3. 鼠标移动  盒子跟随鼠标移动
    // 4. 鼠标抬起  盒子不在移动  


    var dragEle = {
        target: document.getElementsByClassName("box")[0],
        dragStart() {
            // this ->  dragEle

            // 函数作用域嵌套时  this指向冲突的问题
            // 1. 声明中间变量 _this  (提前记录this指向)
            // 2. 箭头函数往外跳一层 
            // 3. bind 根据原函数生成新函数 ,   新函数执行下this指向bind的第一个参数

            // 鼠标按下  记录按下的位置
            this.target.onmousedown = function () {  //新函数执行时 this -> dragEle
                var e = e || window.event;
                var posX = e.offsetX;
                var posY = e.offsetY;
                console.log(posX, posY);

                // 鼠标按下时 将属性存在 dragEle上
                console.log(this); //  this -> 绑定事件的元素 (box)
                this.posX = posX;
                this.posY = posY;

            }.bind(this);  // this => dragEle

        },
        dragMove() {
            // 鼠标移动  盒子跟随鼠标移动
            document.onmousemove = function () {
                var e = e || window.event;
                var x = e.pageX - posX;
                var y = e.pageY - posY;

                box.style.left = x + 'px';
                box.style.top = y + 'px';
            }


        },
        dragEnd() {

        },
    }

    dragEle.dragStart();
    dragEle.dragMove()





</script>

</html>